<template>
  <div :class="`${prefix}`">
    <div :class="`${prefix}-left`">
      <div :class="`${prefix}-left-tit`">{{ questionInfo.title }}</div>
      <p :class="`${prefix}-left-option mt46`">
        <span>
          <i><img :src="$urlResource + questionInfo.avatarUrl" alt="" /></i>
          <i>{{ userNameHandler(questionInfo.userName) }}</i>
        </span>
        <span>
          <i> <SvgIcon name="preview" /></i>
          <i>{{ questionInfo.viewNumber }}</i>
        </span>
        <span>
          <i> <SvgIcon name="time" /></i>
          <i> {{ questionInfo.gmtCreate || questionInfo.gmtModified }} </i>
        </span>
        <span class="btn">{{ getDictItem("questionId", questionInfo.typeId) }}</span>
        <span>
          <i v-if="questionInfo.reward"><SvgIcon name="jb" /></i>
          <i v-if="questionInfo.reward">{{ questionInfo.reward }}</i>
        </span>
      </p>
      <div :class="`${prefix}-left-content pt29 mt30 break-word`" v-html="questionInfo.content"></div>
      <div :class="`${prefix}-left-image mt30`">
        <img
          v-for="(item, index) in questionInfo.questionImg"
          :src="$urlResource + item.path"
          alt=""
          :key="index + '_image'"
          @click="
            imagePreviewFn(
              index,
              questionInfo.questionImg.map((im: any) => $urlResource + im.path)
            )
          "
        />
      </div>
    </div>
    <div :class="`${prefix}-right ml10`">
      <div :class="`${prefix}-right-tit`">共{{ total }}条回答</div>
      <PullLoad
        :class="`${prefix}-right-answer mt10`"
        v-model:params="projectListParams"
        :api="getAnswerByQuestion"
        v-model:value="answerList"
        :transform-format="transformComment"
        ref="pullLoadRef"
      >
        <template v-if="answerList.length">
          <div :class="`${prefix}-right-answer-item`" v-for="(item, index) in answerList" :key="index + '_answer'">
            <div class="answer-item">
              <div class="top">
                <p class="info">
                  <span class="t-img">
                    <i><img :src="$urlResource + item.avatarUrl" alt="" /></i>
                    <i>{{ userNameHandler(item.userName) }}</i>
                  </span>
                </p>
                <div class="t-cmt">
                  <span class="comment" @click="addComment({ relatedId: item.id, relatedTitle: questionInfo.title }, item)">
                    我要评论
                  </span>
                  <div @click.stop v-if="isEdit(item) || isEdit(item) || isAdopt" class="ml20">
                    <el-dropdown trigger="click">
                      <span class="el-dropdown-link">
                        <div class="tit-right">...</div>
                      </span>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item v-if="isEdit(item)" @click="editAnswer(item)">编辑 </el-dropdown-item>
                          <el-dropdown-item v-if="isEdit(item)" @click="deleteAnswer(item.id)">删除</el-dropdown-item>
                          <el-dropdown-item v-if="isAdopt" @click="adoptAnswer(item.id)">采纳</el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </div>
                </div>
              </div>
              <div class="content-t pl40 mt12">
                <p v-html="item.content"></p>
                <div class="image-t mt20">
                  <img
                    v-for="(itm, index) in item.answerImgModels.slice(0, 4)"
                    :key="index + 's_image'"
                    :src="$urlResource + itm.path"
                    alt=""
                    @click="
                      imagePreviewFn(
                        index,
                        item.answerImgModels.map((im: any) => $urlResource + im.path)
                      )
                    "
                  />
                  <div v-if="item.answerImgModels.length > 4" class="image-t-more">
                    +{{ item.answerImgModels.slice(4).length }}
                  </div>
                  <div v-if="item.isAdopt" class="image-t-adopt">已采纳</div>
                </div>
                <div class="mt20">
                  <div class="fj-t mt10" v-for="iem in item.answerFileModels" :key="iem.id">
                    <span class="fj-t-item">
                      <i> <SvgIcon name="fj" /></i>
                      <i>{{ iem.name }}</i>
                    </span>
                    <span @click="downHandler(iem)">下载</span>
                  </div>
                </div>
              </div>
              <div class="top mt20 pl40">
                <p class="info">
                  <span>
                    <i> <SvgIcon name="time" /></i>
                    <i class="fz12"> {{ item.gmtCreate || item.gmtModified }} </i>
                  </span>
                </p>
                <p class="info">
                  <span>
                    <i
                      :class="{ yellow: item.isLike }"
                      class="cursor"
                      @click="item.isLike ? cancelLike({ relatedId: item.id }, item) : addLike({ relatedId: item.id }, item)"
                    >
                      <SvgIcon name="dz" />
                    </i>
                    <i class="fz12"> {{ item.likeNumber }} </i>
                  </span>
                </p>
              </div>
            </div>
            <div class="ml40 mt20 mb20 bd1"></div>
            <template v-if="item.commentList && item.commentList.length">
              <div class="comment-list pl40" v-for="(itm, idx) in item.commentList" :key="itm.id + '_' + idx">
                <p class="info">
                  <span class="t-img">
                    <i><img :src="$urlResource + item.avatarUrl" alt="" /></i>
                    <i style="color: #333333">{{ userNameHandler(item.userName) }}</i>
                  </span>
                </p>
                <p class="mt10 mb10 comment-tit">
                  {{ itm.content }}
                </p>
                <p class="top flx-justify-between">
                  <span class="fz12 ys">{{ itm.gmtCreate }}</span>
                  <span class="comment cursor fz12" @click="deleteComment(itm, item)" v-if="isComment(itm)">删除评论</span>
                </p>
                <div class="mt20 mb20 bd1"></div>
              </div>
            </template>
          </div>
        </template>
        <template v-else>
          <el-empty description="暂无数据" />
        </template>
      </PullLoad>
      <div class="btn" @click="addAnswer"><span>我要回答</span></div>
    </div>
    <el-image-viewer
      v-if="imgViewVisible"
      :url-list="viewImageUrl"
      :initial-index="initialIndex"
      @close="imgViewVisible = false"
    />
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { useRoute } from "vue-router";
import { useDict } from "@/hooks/useDict";
import PullLoad from "@/components/PullLoad/index.vue";
import { useAnswer } from "./hook/useAnswer";
import { useComments } from "./hook/useComments";
import { useSupport } from "./hook/useSupport";
import { useUserStore } from "@/stores/modules/user";
import { downFilesOpen, userNameHandler } from "@/utils";
// api
import { getQuestionById, getAnswerByQuestion, getIsAdoptByQuestion } from "@/api/modules/sys";

// 变量
const userStore = useUserStore();
const { getDictItem } = useDict(["questionId"]);
const prefix = ref<string>("question-container");
const id: any = useRoute().query?.id;
const questionInfo: any = ref<any>({});
const answerList: any = ref<any>([]);
const total = ref(0);
const imgViewVisible = ref(false);
const viewImageUrl = ref([]);
const initialIndex = ref(0);
const isAdoptAnswer = ref(false);
const { addAnswer, deleteAnswer, editAnswer, adoptAnswer } = useAnswer({ initAnswer, questionId: id });
const { getCommentByIdFn, addComment, deleteComment } = useComments();
const { cancelLike, addLike } = useSupport();
let projectListParams: any = ref({
  currentPage: 1,
  pageSize: 5,
  searchKey: "",
  typeId: "",
  status: undefined,
  sortStr: "",
  questionId: id
});
const pullLoadRef = ref(null);
// computed
const isAdopt = computed(() => {
  return userStore.userInfo.id === questionInfo.value.userId && !isAdoptAnswer.value;
});
const isEdit = computed(() => {
  return (answer: any) => userStore.userInfo.id === answer.userId;
});
const isComment = computed(() => {
  return (comment: any) => userStore.userInfo.id === comment.createBy;
});
// 方法
const downHandler = async data => {
  downFilesOpen(data.path, data.name);
};
const transformComment = async (list: any) => {
  if (list.length) {
    for (let i = 0; i < list.length; i++) {
      const data = await getCommentByIdFn(list[i].id);
      const result = (data && data.records) || [];
      list[i].commentList = result;
    }
  }
};
async function initAnswer() {
  projectListParams.value.currentPage = 1;
  projectListParams.value.pageSize = 5;
  pullLoadRef.value.backTop();
  const { data: result } = await getAnswerByQuestion(projectListParams.value);
  const answer = (result && result.records) || [];
  await transformComment(answer);
  answerList.value = answer;
  total.value = (result && result.total) || 0;
  const { data: isAdopt } = await getIsAdoptByQuestion({ id });
  isAdoptAnswer.value = isAdopt;
}
const imagePreviewFn = (index: number, urls: any) => {
  viewImageUrl.value = urls;
  initialIndex.value = index;
  imgViewVisible.value = true;
};
const init = async () => {
  try {
    const { data } = await getQuestionById({ id });
    questionInfo.value = data;
    initAnswer();
  } catch (error) {
    console.log(error);
  }
};
onMounted(async () => {
  init();
});
</script>
<style lang="scss" scoped>
i {
  font-style: normal;
}
p {
  padding: 0;
  margin: 0;
}
.bd1 {
  border-top: 1px solid #e8e8e8;
}
.fz12 {
  font-size: 12px !important;
}
.ys {
  color: #999999 !important;
}
.yellow {
  color: #ff7500 !important;
}
.info {
  display: flex;
  gap: 20px;
  span {
    display: flex;
    align-items: center;
    line-height: 16px;
    i:first-child {
      display: flex;
      align-items: center;
      width: 16px;
      height: 16px;
      margin-right: 10px;
      color: #999999;
      object-fit: cover;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    i:last-child {
      font-size: 12px;
      font-weight: 400;
      color: #999999;
    }
  }
}
.comment {
  font-size: 14px;
  font-weight: 400;
  color: $primary-color;
  cursor: pointer;
}
.comment-tit {
  font-size: 14px;
  font-weight: 400;
  color: #333333;
}
.question-container {
  display: flex;
  height: 100%;
  &-left {
    flex: 1;
    padding: 40px;
    overflow: auto;
    background: #ffffff;
    &-tit {
      font-size: 18px;
      font-weight: 600;
      color: #333333;
    }
    &-option {
      display: flex;
      gap: 40px;
      align-items: center;
      span {
        display: flex;
        align-items: center;
        line-height: 16px;
        i:first-child {
          width: 16px;
          height: 16px;
          margin-right: 10px;
          color: #999999;
          object-fit: cover;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        i:last-child {
          font-size: 14px;
          font-weight: 400;
          color: #999999;
        }
      }
      .btn {
        padding: 2px 10px;
        font-size: 12px;
        color: #ffffff;
        background: $primary-color;
        border-radius: 3px;
      }
    }
    &-content {
      border-top: 1px solid rgb(238 238 238 / 100%);
    }
    &-image {
      // display: flex;
      // flex-flow: column nowrap;
      // gap: 30px;
      img {
        display: block;
        max-width: 100%;
        height: auto;

        // margin-bottom: 30px;
        object-fit: contain;
      }
    }
  }
  &-right {
    position: relative;
    display: flex;
    flex: 0 0 550px;
    flex-flow: column nowrap;
    &-tit {
      flex: 0 0 74px;
      padding-left: 44px;
      font-size: 14px;
      line-height: 74px;
      color: #333333;
      background: #ffffff;
    }
    &-answer {
      position: relative;
      flex: 1;
      padding: 30px;
      padding-bottom: 66px;
      overflow: auto;
      background: #ffffff;
      &-item {
        .answer-item {
          .top {
            display: flex;
            justify-content: space-between;
            .t-img {
              i:first-child {
                width: 30px;
                height: 30px;
              }
              i:last-child {
                font-size: 14px;
                color: #333333;
              }
            }
            .t-cmt {
              display: flex;
              align-items: center;
            }
            .tit-right {
              display: flex;
              align-self: flex-start;
              margin-top: 8px;
              margin-right: 0;
              font-weight: bold;
              line-height: 0;
              color: #333333;
              letter-spacing: 3px;
              cursor: pointer;
              transform: rotate(-90deg);
            }
          }
          .content-t {
            p {
              font-size: 14px;
              font-weight: 400;
              color: #333333;
            }
            .image-t {
              position: relative;
              display: flex;
              gap: 10px;
              img {
                width: 105px;
                height: 70px;
                cursor: pointer;
                object-fit: cover;
              }
              .image-t-more {
                position: absolute;
                right: 0;
                width: 30px;
                height: 18px;
                font-size: 12px;
                line-height: 18px;
                color: #ffffff;
                text-align: center;
                background: #333333;
              }
              .image-t-adopt {
                position: absolute;
                left: 0;
                height: 18px;
                padding: 0 10px;
                font-size: 12px;
                font-weight: 400;
                color: #ffffff;
                text-align: center;
                background: $primary-color;
              }
            }
            .fj-t {
              display: flex;
              gap: 5px;
              justify-content: space-between;
              font-size: 12px;
              color: $primary-color;
              span:last-child {
                flex: 0 0 40px;
                cursor: pointer;
              }
              &-item {
                display: flex;
                gap: 5px;
                align-items: center;
              }
            }
          }
        }
      }
    }
    .btn {
      position: absolute;
      bottom: 0;
      display: flex;
      align-content: center;
      width: 100%;
      padding-bottom: 10px;
      background: #ffffff;
      span {
        width: calc(100% - 40px);
        height: 56px;
        margin: 0 20px;
        font-size: 18px;
        font-weight: 400;
        line-height: 56px;
        color: #ffffff;
        text-align: center;
        cursor: pointer;
        background: $primary-color;
        border-radius: 4px;
      }
    }
  }
}
</style>
